<template>
    <ul class="adpList wrapfix" :class="{'maxList':listType==2}">
        <template v-if="type==1"> <!--商品-->
            <li v-for="dt in lists" class="imgBox-sell" :key="dt.goodsId" :style="{width}">
                <router-link :to="`/goods/${dt.goodsId}`">
                    <div class="imgBox">
                        <Image :url="dt.imageUrl"/>
                         <div class="bg-view"></div>
                          <div class="price-view">
                            <h4>{{dt.title}}</h4>
                            <div class="price" v-if="dt.internalEthPrice">
                                <span> <img src="/images/priceIcon.png" alt=""> </span>
                                {{dt.internalEthPrice.decimalFourString}}
                                <em class="usd">(${{dt.internalPrice.decimalTwoString}})</em>
                             </div>
                                    <!-- <p>{{dt.nftDescription}}</p> -->
                        </div>
                    </div>
                    <!-- <div class="con">
                        <h4>{{dt.title}}</h4>
                        <div class="price" v-if="dt.internalEthPrice">
                            <span> <img src="/images/priceIcon.png" alt=""> </span>
                            {{dt.internalEthPrice.decimalFourString}}
                            <em class="usd">(${{dt.internalPrice.decimalTwoString}})</em>
                        </div>
                    </div> -->
                </router-link>
            </li>
        </template>
        <template v-else-if="type==2"><!--广告位-->
            <li v-for="dt in lists" :key="dt.adPlaceId" :class="{'bottomList':listType==2}" :style="{width}">
                <!-- <a class="ggwlbox" @click="goDetail(dt)"> -->
                <router-link class="ggwlbox" v-if="listType==1"  :to="`/ad/detail/${dt.adPlaceId}`">
                    <div class="stars" v-if="dt.placeStatus==2"></div>
                    <div class="imgBox imgBox1">
                        <Image :url="dt.adArImg"/>
                         <div class="bg-view1"></div>
                         <div class="trFlag1">UV{{dt.totalUv || 0}}</div>
                         <div class="adplace-title">{{dt.adPlaceTitle}}</div>
                    </div>
                </router-link>
                <router-link class="ggwlboxnext" v-if="listType==2"  :to="`/ad/detailBottom/${dt.adPlaceId}`">
                    <div class="stars" v-if="dt.placeStatus==2"></div>
                    <div class="imgBox">
                        <Image :url="dt.adArImg"/>
                         <div class="bg-view"></div>
                        <!-- <h5 class="yugao" v-if="dt.placeStatus==2">Delivered</h5> -->
                        <div class="trFlag1">UV {{dt.totalUv || 0}}</div>
                         <div class="adplace-title">{{dt.adPlaceTitle}}</div>
                    </div>
                    <!-- <div class="con">
                        <h4>{{dt.adPlaceTitle}}</h4>
                        <p class="wz">{{dt.adPlaceIntroduce}}</p>
                    </div> -->
                </router-link>
            </li>
        </template>
        <template v-else-if="type==3"><!--世界杯空投-->
            <li class="kongtou" v-for="dt in lists" :key="dt.cardId" :style="{width}">
                <a @click="goDetail(dt)">
                    <div class="imgBox">
                        <Image :url="dt.cardImg"/>
                    </div>
                </a>
            </li>
        </template>
        <template v-else-if="type==4"><!--道具-->
            <li v-for="dt in lists"  :key="dt.arPropId" :style="{width}"> 
                <router-link  class="ggwlbox" :to="`/ad/detailProp?arPropId=${dt.arPropId||null}&propTemplateId=${dt.propTemplateId||null}&exchanged=${dt.exchanged||null}`">
                     <div class="imgBox imgBox1">
                        <Image :url="dt.headerImageUrl"/>
                         <div class="bg-view1"></div>
                         <div class="trFlag1" v-if="dt.arPropId">${{dt.transactionPrice?.decimalTwoString||'0.00'}}</div>
                         <div class="trFlag1" v-if="dt.propTemplateId">{{dt.coinName}} {{dt.propPrice?.decimalTwoString || 0}}</div>

                         <div class="adplace-title">{{dt.name}}</div>
                    </div>
                </router-link>
            </li>
        </template>
        <template v-else-if="type==5"><!--我的卡片-->
            <li class="mycardlist" v-for="(dt,i) in lists" :key="dt.cardId" :style="{width}">
                <a @click="goDetail(dt)">
                    <fragmen-union-bg :id="`frg${i}`" :styleType="3" :fragmentNoList="dt.viewStatus==5?[]:getFragmentNoList(dt.fragmentList)" :cardUrl="dt.cardImg" :item="dt">
                        <div class="dzBtn" @click.stop="btnClick(dt)" v-if="dt.viewStatus==2">Forgeable</div>
                        <div class="dzBtn dzBtn2" v-else-if="dt.viewStatus==3">Forging</div>
                        <div class="dzBtn dzBtn2" v-else-if="dt.viewStatus==5">Forged</div>
                    </fragmen-union-bg>
                </a>
            </li>
        </template>
        <template v-else-if="type==6"><!--售卖-->
            <li v-for="dt in lists" :key="dt.bornId" :style="{width}">
                <a @click="goDetail(dt)">
                    <div class="imgBox">
                        <Image :url="dt.imageUrl"/>
                        <h5 class="starting yugao" v-if="dt.sellStatus==0">
                            <p v-t="'goodsList.text1'">Notice</p>
                            <p>Start {{dt.startTime}}</p>
                        </h5>
                        <h5 v-else-if="dt.sellStatus==10" class="starting" >
                            <p v-t="'goodsList.text3'">processing</p>
                            <p>End {{dt.endTime}}</p>
                        </h5>
                    </div>
                    <div class="con">
                        <h4>{{dt.title}}</h4>
                        <div class="price" v-if="dt.internalEthPrice">
                            <span> <img src="/images/priceIcon.png" alt=""> </span>
                            {{dt.internalEthPrice.decimalTwoString}}
                            <em class="usd">(${{dt.internalPrice.decimalTwoString}})</em>
                        </div>
                    </div>
                </a>
            </li>
        </template>
        <template v-else-if="type==7"><!--数字产品-->
            <li v-for="dt in lists" :key="dt.orderId" :style="{width}">
                <a @click="goDetail(dt)">
                    <div class="imgBox">
                        <Image :url="dt.imageUrl"/>
                    </div>
                    <div class="con">
                        <h4>{{dt.title}}</h4>
                        <p>{{dt.subtitle}}</p>
                    </div>
                </a>
            </li>
        </template>
        <template v-else-if="type==8 || type==9"><!--售卖-->
            <li class="imgBox-sell" v-for="(dt,i) in lists" :key="i" :style="{width}">
                <a @click="goDetail(dt)">
                    <div class="imgBox">
                        <Image :url="dt.nftImage"/>
                         <div class="bg-view"></div>
                         <div class="price-view">
                                    <h4>{{dt.title}}</h4>
                                    <div  v-if="type==9" class="price">
                                        <template v-if="dt.transactionEthPrice">
                                            <span> <img src="/images/priceIcon.png" alt=""> </span>
                                            {{dt.transactionEthPrice.decimalFourString}}
                                            <em class="usd">(${{dt.transactionUsdPrice.decimalTwoString}})</em>
                                        </template>
                                    </div>
                                    <div v-else class="price">
                                        <template v-if="dt.ethPrice">
                                            <span> <img src="/images/priceIcon.png" alt=""> </span>
                                            {{dt.ethPrice.decimalFourString}}
                                            <em class="usd">(${{dt.initialPrice.decimalTwoString}})</em>
                                        </template>
                                        <template v-else>
                                            ${{dt.initialPrice.decimalTwoString}}
                                        </template>
                                    </div>
                                 <!-- <p>{{dt.nftDescription}}</p> -->
                        </div>
                      </div>
                     <div class="bottom-line-view" :class="{
                        'successful':dt.sellStatus==20,
                        'processing':dt.sellStatus==10||dt.sellStatus==40,
                        'end':(dt.sellStatus==20 && dt.sellModel==0) || dt.sellStatus==30,
                        }">
                              <h5 class="starting yugao" v-if="dt.sellStatus==0"><!---预告-->
                                    <p v-t="'goodsList.text1'">Notice</p>
                                    <p>Start <span>{{dt.startTime || '--'}}</span></p>
                                </h5>

                                <h5 v-else-if="dt.sellStatus==10 && dt.sellModel==1" class="starting jinxingzhong" ><!---拍卖中-->
                                    <p v-t="'goodsList.text3'">Processing</p>
                                    <p>End<span>{{dt.endTime || '--'}}</span></p>
                                </h5>
                                <h5 v-else-if="dt.sellStatus==10 && dt.sellModel==0" class="starting jinxingzhong" ><!---出售中-->
                                    <p v-t="'goodsList.text5'">On Sale</p>
                                    <!-- <p>End <span>{{dt.endTime || '--'}}</span></p> -->
                                </h5>
                                 <h5 v-else-if="dt.sellStatus==40 && dt.sellModel==0" class="starting jinxingzhong" ><!---交易中-->
                                    <p v-t="'goodsList.text6'">In Transaction</p>
                                    <!-- <p>End <span>{{dt.endTime || '--'}}</span></p> -->
                                </h5>
                                <h5 v-else-if="dt.sellStatus==20 && dt.sellModel==0" class="starting jieshu" ><!---直售成功\结束-->
                                    <template v-if="type==9">
                                        <template v-if="sellMyType==3"><!---我发起的直售-->
                                            <p v-if="dt.toAddress && userInfo.walletAddress.toLowerCase()!=dt.toAddress.toLowerCase()" 
                                            v-t="'goodsList.text17'">Successful sale</p>
                                            <p v-else v-t="'goodsList.text7'">End of sale</p>
                                        </template>
                                        <template v-else> <!---我参与的直售-->
                                            <p v-if="dt.toAddress && userInfo.walletAddress.toLowerCase()==dt.toAddress.toLowerCase()"
                                             v-t="'goodsList.text18'">Purchase succeeded</p>
                                            <p v-else v-t="'goodsList.text8'">Purchase failed</p>
                                        </template>
                                    </template>
                                    <template v-else>
                                        <p v-if="dt.toAddress && userInfo.walletAddress.toLowerCase()==dt.toAddress.toLowerCase()" 
                                        v-t="'goodsList.text17'">Successful sale</p>
                                        <p v-else v-t="'goodsList.text7'">End of sale</p>
                                    </template>
                                </h5>
                                <h5 v-else-if="dt.sellStatus==20 && dt.sellModel==1" class="starting jieshu" ><!---拍卖成功\结束-->
                                    <template v-if="type==9">
                                        <template v-if="sellMyType==1"><!---我发起的拍卖-->
                                            <p v-if="dt.toAddress && userInfo.walletAddress.toLowerCase()!=dt.toAddress.toLowerCase()" 
                                            v-t="'goodsList.text16'">Successful auction</p>
                                            <p v-else v-t="'goodsList.text9'">End of auction</p>
                                        </template>
                                        <template v-else> <!---我参与的拍卖-->
                                            <p v-if="dt.toAddress && userInfo.walletAddress.toLowerCase()==dt.toAddress.toLowerCase()" 
                                            v-t="'goodsList.text16'">Successful auction</p>
                                            <p v-else v-t="'goodsList.text9'">End of auction</p>
                                        </template>
                                    </template>
                                    <template v-else>
                                        <p v-if="dt.toAddress && userInfo.walletAddress.toLowerCase()==dt.toAddress.toLowerCase()" 
                                        v-t="'goodsList.text16'">Successful auction</p>
                                        <p v-else v-t="'goodsList.text9'">End of auction</p>
                                    </template>
                                </h5>
                                <h5 v-else-if="dt.sellStatus==30 && dt.sellModel==1" class="starting jieshu" ><!---拍卖失败-->
                                    <p v-t="'goodsList.text10'">Auction Failure</p>
                                </h5>
                                <h5 v-else class="starting jieshu" ><!---拍卖失败-->
                                    <p v-t="'goodsList.text10'">Auction Failure</p>
                                </h5>
                     </div>
                </a>
            </li>
        </template>
        <template v-else><!--藏品-->
            <li v-for="dt in lists" class="imgBox-sell" :key="dt.bornId" :style="{width}">
                <a @click="goDetail(dt)">
                     <div class="imgBox">
                        <Image :url="dt.nftImage"/>
                         <div class="bg-view"></div>
                         <div class="price-view">
                             <h4>{{dt.nftName}}</h4>
                             <div class="price" v-if="dt.buyAmount">
                               {{dt.buyAmount.decimalTwoString}}
                            </div>
                        </div>
                    </div>
                    <div class="bottom-line-view" 
                     :class="{
                         'processing':dt.sellStatus==10 && dt.sellModel==0,
                         'end':dt.sellStatus==20,
                         'view':dt.sellStatus==null||dt.sellStatus==0 }">
                        <h5 v-if="dt.sellStatus==0" v-t="'goodsList.text11'"><!---预告-->
                             PREVIEW
                        </h5>
                         <h5 v-else-if="dt.sellStatus==10 && dt.sellModel==1" v-t="'goodsList.text12'"><!---10:竞拍中、出售中-->
                             IN AUCTION
                        </h5>
                         <h5 v-else-if="dt.sellStatus==10 && dt.sellModel==0" v-t="'goodsList.text13'"><!---10出售中-->
                             SELLING
                        </h5>
                         <h5 v-else-if="dt.sellStatus==20" v-t="'goodsList.text14'"><!---20结束-->
                             Over
                        </h5>
                         <h5 v-else v-t="'goodsList.text15'">
                             VIEW
                        </h5> 
                    </div> 
                </a>
                    <!-- <div class="imgBox">
                        <Image :url="dt.nftImage"/>
                        <h5 class="starting yugao" v-if="dt.sellStatus==0">
                            <p>Notice</p>
                            <p>Start {{dt.startTime}}</p>
                        </h5>
                        <h5 v-else-if="dt.sellStatus==10 && dt.sellModel==1" class="starting jinxingzhong" title="拍卖中" >
                            <p>In Auction</p>
                        </h5>
                        <h5 v-else-if="dt.sellStatus==10 && dt.sellModel==0" class="starting jinxingzhong" title="出售中" >
                            <p>On Sale</p>
                        </h5>
                        <h5 v-else-if="dt.sellStatus==20" class="starting jinxingzhong" title="出售中" >
                            <p>It's Already Over</p>
                        </h5>
                    </div>
                    <div class="con">
                        <h4>{{dt.nftName}}</h4>
                        <p>{{dt.nftDescription}}</p>
                    </div> -->
              
            </li>
        </template>
    </ul>
</template>

<script>
import { reactive,toRefs,getCurrentInstance ,computed} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import Image from '@/components/image.vue';
import fragmenUnionBg from '@/components/fragmenUnionBg.vue'
import { useI18n } from 'vue-i18n'

export default {
    components:{
       Image,
       fragmenUnionBg
    },
    props:{
        lists:{
            type:Array,
            default:[]
        },
        listType:{
            type:[Number,String],
            default:1 //1总体广告 2底部广告
        },
        type:Number,// 1为商品（店铺）列表
        width:String, // 宽度，百分比
        linkPrefix:String // 跳转到详情链接前缀
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const {t} = useI18n()

        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo),
            sellMyType:computed(()=>store.state.sell.sellMyType) //  1我发起的拍卖，2我参与的拍卖，3我发起的值售，4我购买的直售
        })
        const goDetail = item =>{
            if(props.linkPrefix){
                router(`${props.linkPrefix}/${item.id}`)
            }else{
                context.emit('onClick',item)  // 让调用者自己处理
            }
        }
        const btnClick = (item)=>{
            context.emit('btnClick',item)  
        }
        const getFragmentNoList = (fragmentList)=>{
            if(fragmentList){
                return fragmentList.map(item=>item.fragmentNo)
            }else{
                return []
            }
        }

        return{
            ...toRefs(state),
            goDetail,
            btnClick,
            getFragmentNoList
        }
    }
}
</script>

<style lang="scss" scoped>
    .maxList{
        margin-top:30px;
    }
    .adpList{
        width: 100%;
        padding: 0 0 30px 0;
        font-family: Poppins-Medium, Poppins;
        font-weight: 500;
        li{
            float: left;
            width: 20%;
            padding: 30px 30px 0 0;
            box-sizing: border-box;
            &.kongtou{
                a{
                   .imgBox{
                        height: 420px;
                   } 
                }
            }
            &.mycardlist{
                a{
                    display: flex;
                    //align-items: center;
                    justify-content: center;
                    height: 420px;
                    .dzBtn{
                        position: absolute;
                        z-index: 15;
                        left: 50%;
                        top: 50%;
                        width: 200px;
                        height: 80px;
                        line-height: 80px;
                        background: url(/images/wc/dz1.png) left top no-repeat;
                        background-size: 100% 100%;
                        font-size: 28px;
                        color: #fff;
                        text-align: center;
                        font-family: Inter-Medium, Inter;
                        font-weight: 500;
                        margin: -40px 0 0 -100px;
                        &.dzBtn2{
                            background-image: url(/images/wc/dz2.png)
                        }
                    }
                }
            }
            a{
                display: block;
                width: 100%;
                position: relative;
                &.ggwlbox{
                    height: 320px;
                    overflow: hidden;
                    .con{
                        p{
                            &.wz{
                                height: 70px;
                            }
                        }
                    }
                    
                }
                 &.ggwlboxnext{
                    height: 300px;
                    overflow: hidden;
                    .con{
                        p{
                            &.wz{
                                height: 70px;
                            }
                        }
                    }
                    
                }
                .stars{
                        width: 32px;
                        height: 32px;
                        background: url(/images/gloabAdSplace/stars.png) left top no-repeat;
                        background-size: 100% 100%;
                        position: absolute;
                        top:10px;
                        left:10px;
                        z-index:99;
                }
                .bg-view1,
                .bg-view{
                        width: 100%;
                        height: 280px;
                        background-image: url(/images/gloabAdSplace/bg.png);
                        background-size: 100% 100%;
                        position: absolute;
                        background-position: center;
                        background-repeat: no-repeat;
                        top:50%;
                        left:50%;
                        margin-top:-140px;
                        margin-left:-50%;
                        z-index:19;
                }
                .imgBox{
                    position: relative;
                    z-index: 10;
                    height: 280px;
                    width: 100%;
                    h5{
                        position: absolute;
                        z-index: 10;
                        left: 0;
                        bottom: 0;
                        width: 100%;
                        padding: 0 15px;
                        line-height: 48px;
                        color: #fff;
                        font-family: Poppins-Medium, Poppins;
                        font-size: 22px;
                        font-weight: 500;
                        overflow: hidden;
                        height:48px;
                        &.yugao{
                            background: rgba(255,204,0,0.7000); 
                        }
                        &.end{
                            background: rgba(0,0,0,0.7000);
                        }
                        &.starting{
                            line-height: 34px;
                            padding-top:10px ;
                            padding-bottom:10px ;
                            height: auto;
                            background: rgba(216,75,75,0.7000);
                            &.yugao{
                                background: rgba(255,204,0,0.7000); 
                            }
                            &.jinxingzhong{
                                background: rgba(216,75,75,0.7000);
                            }
                            &.jieshu{
                                background: rgba(58, 120, 235, 0.7); 
                            }
                            &.saleing{
                                background: rgba(58, 120, 235, 0.7); 
                            }
                            
                        }
                        p{
                            span{
                                font-size: 24px;
                            }
                        }
                    }
                }
                .imgBox1{
                    height:320px;
                }
                 .bg-view1{
                    height: 320px; 
                    margin-top:-160px;
                 }
                .trFlag1,
                .adplace-title{
                    font-size:24px;
                    color:#fff;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                     position: absolute;
                    z-index: 10;
                    left: 0;
                    bottom: 40px;
                    width: 100%;
                    padding: 0 15px;
                    line-height: 48px;
                    color: #fff;
                    font-family: Poppins-Medium, Poppins;
                    height:48px;
                }
                .trFlag1{
                    bottom:0px;
                    color: #FF856A;
                }
                 .trFlag{
                        height: 40px;
                        line-height: 45px;
                        padding:0 24px;
                        font-size: 20px;
                        color: #fff;
                        font-family: Poppins-Medium, Poppins;
                        font-weight: 500;
                        background-color: #0A2C2E;
                        text-align: center;
                        border-left:1px solid #67F8FF;
                        border-right:1px solid #67F8FF;
                        border-bottom:1px solid #67F8FF;
                }
                .con{
                    padding: 15px;
                    background: rgba(44,91,169,0.7000);
                    line-height: 38px;
                    h4{
                        font-size: 24px;
                        margin: 0;
                        padding: 0;
                        color: #fff;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    p{
                        height: 80px;
                        font-size: 22px;
                        color: #C1CDE5;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        &.wz{
                            line-height: normal;
                            height: 60px;
                            padding: 5px 0 0 0;
                        }
                    }
                    .price{
                        display: flex;
                        height: 60px;
                        align-items: center;
                        font-family: Inter-Medium, Inter;
                        font-weight: 500;
                        color: #CFFFFF;
                        font-size:26px;
                        line-height: normal;
                        span{
                            padding: 0 10px 0 0;
                            img{
                                display: block;
                                width: 22px;
                            }
                        } 
                        em{
                            font-style: normal;
                            color: #fff;

                        }
                    }
                }
            }
        } 
        li.bottomList{
             padding: 0 30px 0 0;
        }
        .imgBox-sell{
                // border:1px solid #67F8FF;
                padding:0;
                margin-right:20px;
                margin-top:20px;
                width:300px;
                .price-view{
                    position: absolute;
                    bottom:0;
                    width:100%;
                    padding:10px 20px;
                    color: #FF856A;
                    font-size:20px;
                    h4{
                        color:#fff;
                        font-size:24px;
                        overflow:hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        -o-text-overflow:ellipsis;
                    }
                    img{
                        width:16px;
                        height:24px;
                    }
                }
                .bottom-line-view{
                    padding:0 20px;
                    background: linear-gradient(225deg, #FF3300 0%, #841A00 100%);
                    border-left: 1px solid #67F8FF;
                    border-bottom: 1px solid #67F8FF;
                    border-right: 1px solid #67F8FF;
                    font-size:24px;
                    height:60px;
                    line-height: 60px;
                    overflow: hidden;
                    text-overflow:ellipsis;
                     white-space: nowrap;
                }.successful{
                    background: linear-gradient(225deg, #72D014 0%, #00844C 100%);
                }.processing{
                    background: linear-gradient(225deg, #00A3FF 0%, #004AD9 100%);
                }.end{
                    background: linear-gradient(225deg, #B1B1B1 0%, #474747 100%);
                }.view{
                   background: linear-gradient(225deg, #FF3300 0%, #841A00 100%);
                }
         }
    }
    @media screen and (max-width:844px) {
        .adpList {
            li{
                width: 25%;
            }
        }
    }
    @media screen and (max-width:667px) {
        .adpList {
            li{
                width: 33.3333%;
            }
        }
    }

</style>